<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="'用户'" :editModel="editModel" :api="api" :form="form"
      :formRules="formRules" @onSave="onSave" @onSaved="saveTab" :autoSave="false">
      <dym-form :editModel="editModel" :componentList="componentList" :formValue.sync="form"
        ></dym-form>
    </dialog-edit>
  </div>
</template>

<script>
  import BaseDialog from '@/pages/BaseDialog'
  import DialogEdit from '@/components/dialog/DialogEdit'
  import dymForm from '@/components/element/dymForm'
  import {regExp} from '@/utils/reg'
  import componentApi from '@/api/component/componentApi'
  import { sysUser } from '@/api/platformApi'
  import { sysRole } from '@/api/business/businessApi'
  export default {
    extends: new BaseDialog(),
    components: {
      DialogEdit,
      dymForm
    },
    data () {
      // 名称自定义验证规则
      var projec = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'))
        }
        // 正则表达式验证
        if (!regExp.projectName.test(value)) {
          callback(new Error('格式不正确'))
        } else {
          callback()
        }
      }
      return {
        officeOptions: [],
        // 需要显示的每一项定义在这里
        componentList: [
          {
            label: '工号',
            prop: 'no', // 表单验证传入的值
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'no' // 字段显示的值
          },
          {
            label: '姓名',
            prop: 'name',
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'name'
          },
          {
            label: '归属公司',
            prop: 'companyId',
            labelWidth: '120px',
            componentName: 'cascaderCompany',
            cols: [12, 12, 12, 12],
            placeholder: '请先选择',
            value: 'companyId'
          },
          {
            label: '所属部门',
            prop: 'officeId',
            labelWidth: '120px',
            componentName: 'cascaderDepartment',
            cols: [12, 12, 12, 12],
            companyId: '',
            placeholder: '请先选择',
            value: 'officeId'
          },
          {
            label: '登录账号',
            prop: 'loginName',
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            value: 'loginName',
            placeholder: '请输入'
          },
          {
            label: 'AD域账号',
            prop: 'adUser',
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            value: 'adUser',
            placeholder: '请输入'
          },
          {
            label: '电话',
            prop: 'phone',
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            value: 'phone',
            placeholder: '请输入'
          },
          {
            label: '手机',
            prop: 'mobile',
            labelWidth: '120px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            value: 'mobile',
            placeholder: '请输入'
          },
          {
            label: '状态',
            prop: 'useable',
            labelWidth: '120px',
            componentName: 'dict',
            dictTypeCode: 'userStatus',
            cols: [12, 12, 12, 12],
            value: 'useable',
            placeholder: '请输入'
          },
          {
            label: '邮箱',
            prop: 'email',
            labelWidth: '120px',
            componentName: 'el-input',
            type: 'email',
            cols: [12, 12, 12, 12],
            value: 'email',
            placeholder: '请输入'
          },
          {
            label: '联系方式公开',
            prop: 'telOvert',
            labelWidth: '120px',
            componentName: 'el-switch',
            cols: [12, 12, 12, 12],
            value: 'telOvert',
            placeholder: '请输入'
          },
          {
            label: '拥有角色',
            prop: 'roleIds',
            labelWidth: '120px',
            componentName: 'BaseSelect',
            api: sysRole,
            loadList: 'roleAll',
            multiple: true,
            cols: [24, 24, 24, 24],
            value: 'roleIds',
            placeholder: '请输入'
          },
          {
            label: '备注',
            prop: 'remarks',
            labelWidth: '120px',
            componentName: 'el-input',
            type: 'textarea',
            cols: [24, 24, 24, 24],
            value: 'remarks',
            placeholder: '请输入'
          }
        ],
        // 表单验证
        formRules: {
          // 表单字段名：[规则]
          no: [{ required: true, message: '必填', trigger: 'blur' }],
          name: [{ required: true, message: '必填', trigger: 'blur' }],
          companyId: [{ required: true, message: '必填', trigger: 'blur' }],
          loginName: [{ required: true, message: '必填', trigger: 'blur' }],
          useable: [{ required: true, message: '必填', trigger: 'blur' }],
          officeId: [{ required: true, message: '必填', trigger: 'blur' }],
          // 自定义验证规则
          projectName: [{ required: true, validator: projec, trigger: 'blur' }]
        },
        orgTreeData: []
      }
    },
    watch: {
      'form.companyId' (companyId) {
        // this.getOrgTree(val)
        this.changDepatrment(companyId)
      }
    },
    created () {
      // 修改编辑时，回显数据
      if (this.editModel !== 'C') {
        this.changDepatrment(this.form.companyId)
      }
      // 联系方式默认选中
      if (this.editModel === 'C') {
        this.$set(this.form, 'telOvert', '1')
        this.$set(this.form, 'useable', '1')
      }
    },
    methods: {
      getOrgTree (val) {
        if (val === 'null' || val === null) return
        if (val) return this.warning('请先选择归属公司')
        componentApi.orgTree.get(val).then(res => {
          this.componentList.map(_ => {
            if (_.value === 'officeId') {
              _.options = res.data
            }
          })
        })
      },
      changDepatrment (val) {
        this.componentList.map(_ => {
          if (_.value === 'officeId') {
            _.companyId = val
          }
        })
      },
      saveTab () {
        if (!this.saveFlag) {
              let $this = this
          if (this.form.id) {
            sysUser.update(this.form.id, this.form).then(res => {
                if (res.code === 0) {
              this.dialogVisible = false
              this.$emit('handSearch')
              $this.success('修改成功')
              } else if (res.code === -1) {
                $this.error(res.msg)
              }
            })
          } else {
            sysUser.create(this.form).then(res => {
              if (res.code === 0) {
                 $this.success('新增成功')
                 this.dialogVisible = false
              } else if (res.code === -1) {
                $this.error(res.msg)
              }
            })
          }
        } else {
          this.dialogVisible = false
          this.$emit('handSearch')
        }
      }
    }
  }
</script>
